<template>
  <div class="column-setting">
    <APopover
      v-model:open="visible"
      title="列设置"
      trigger="click"
      placement="bottomRight"
      overlay-class-name="column-setting-popover"
    >
      <template #content>
        <div class="column-setting-content">
          <div class="setting-header">
            <ACheckbox
              v-model:checked="checkAll"
              :indeterminate="indeterminate"
              @change="handleCheckAllChange"
            >
              列展示
            </ACheckbox>
            <AButton type="link" size="small" @click="handleReset">
              重置
            </AButton>
          </div>
          <ADivider style="margin: 12px 0" />
          <ACheckboxGroup v-model:value="checkedList" class="column-list" @change="handleCheckChange">
            <ACheckbox
              v-for="item in columnList"
              :key="item.key"
              :value="item.key"
              :disabled="item.disabled"
              class="column-item"
            >
              {{ item.title }}
            </ACheckbox>
          </ACheckboxGroup>
        </div>
      </template>
      <ATooltip title="列设置">
        <AButton type="default" :icon="h(SettingOutlined)" />
      </ATooltip>
    </APopover>
  </div>
</template>

<script setup>
import { ref, computed, watch, h } from 'vue'
import { SettingOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  columns: {
    type: Array,
    required: true,
    default: () => []
  }
})

const emit = defineEmits(['change'])

const visible = ref(false)

// 列列表（排除操作列和固定列）
const columnList = computed(() => {
  return props.columns
    .filter(col => {
      // 排除操作列
      if (col.key === 'action' || col.dataIndex === 'action') {
        return false
      }
      return true
    })
    .map(col => ({
      key: col.key || col.dataIndex,
      title: col.title,
      disabled: col.fixed === 'left' || col.fixed === true, // 固定列不允许取消
      visible: col.visible !== false
    }))
})

// 选中的列
const checkedList = ref([])

// 初始化选中列表
const initCheckedList = () => {
  checkedList.value = columnList.value
    .filter(item => item.visible !== false)
    .map(item => item.key)
}

// 全选状态
const checkAll = computed(() => {
  return checkedList.value.length === columnList.value.length
})

// 半选状态
const indeterminate = computed(() => {
  const len = checkedList.value.length
  return len > 0 && len < columnList.value.length
})

// 全选/取消全选
const handleCheckAllChange = (e) => {
  if (e.target.checked) {
    checkedList.value = columnList.value.map(item => item.key)
  } else {
    // 保留固定列
    checkedList.value = columnList.value
      .filter(item => item.disabled)
      .map(item => item.key)
  }
  emitChange()
}

// 单个列选择变化
const handleCheckChange = () => {
  emitChange()
}

// 重置
const handleReset = () => {
  initCheckedList()
  emitChange()
  visible.value = false
}

// 触发变化事件
const emitChange = () => {
  emit('change', checkedList.value)
}

// 监听列变化，重新初始化
watch(
  () => props.columns,
  () => {
    initCheckedList()
  },
  { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.column-setting {
  display: inline-block;
}

.column-setting-content {
  min-width: 380px;
  max-width: 600px;
  max-height: 250px;
  overflow-y: auto;

  .setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .column-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;

    .column-item {
      flex: 0 0 auto;
      min-width: 0;
      padding: 6px 10px;
      border-radius: 4px;
      transition: all 0.2s;
      
      &:hover {
        background-color: #f5f5f5;
      }

      :deep(.ant-checkbox-wrapper) {
        white-space: nowrap;
      }
    }
  }

  // 自适应：小屏幕
  @media screen and (max-width: 500px) {
    min-width: 280px;
    max-width: 90vw;
  }
}
</style>

<style lang="scss">
.column-setting-popover {
  .ant-popover-inner-content {
    padding: 12px;
  }
}
</style>

